<template>
  <div class="PropertiesConfig">
    <div v-if="selectWidgetConfig">
      <WidgetProperties :widgetConfig="selectWidgetConfig"></WidgetProperties>
    </div>
    <div v-else-if="pageConfig">
      <div>
        <span>width</span>
        <input type="number" v-model="pageConfig.width">
      </div>
      <div>
        <span>height</span>
        <input type="number" v-model="pageConfig.height">
      </div>
      <div>
        <span>bgColor</span>
        <input type="color" v-model="pageConfig.bgColor">
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject } from 'vue-property-decorator'
import ApplicationEditor from '@/components/application-editor/ApplicationEditor.vue'
import FileEditableObject from '@/core/editable-object/file/FileEditableObject'
import WidgetProperties from './WidgetProperties.vue'

@Component({
  components: { WidgetProperties }
})
export default class PropertiesConfig extends Vue {
  @Inject('app-editor')
  public appEditor!: ApplicationEditor

  private get fileEditableObject() {
    const currentEditableObject = this.appEditor.currentEditableObject
    if (currentEditableObject instanceof FileEditableObject) {
      return currentEditableObject
    }
    return null
  }
  
  private get file() {
    return this.fileEditableObject?.file
  }

  private get fileHandler() {
    return this.fileEditableObject?.fileHandler
  }

  private get pageConfig() {
    return this.fileHandler?.pageConfig
  }

  private get selectWidgetConfig() {
    return this.fileHandler?.singleSelectedWidgetConfig
  }
}
</script>
<style scoped lang="scss">
@import '~@/style/variables.scss';
.PropertiesConfig {
  height: 100%;
}
</style>
